Volume 2

Issue 1

March 2005

Tools and Technology Understanding the Scalable Vector Graphics Standard Sara Porter Assistant Professor, Computer Graphics Technology, Purdue University West Lafayette, IN sjporter@purdue.edu In this article I will discuss the standard called Scalable Vector Graphics, or SVG. I begin with a brief explanation of what SVG is and conclude by explaining why SVG is important to adopt and use. The article is written in "non-program speak" and is intended to give a brief, high-level explanation of a very robust and deep technology, including what it is, why use it, and additional advantages of SVG Where do standards exist Standards are everywhere and can be seen in everyday life. They can be government regulated, such as airline and rail standards. They can be industry endorsed, such as ISO, QS, and ANSI. They can be represented in the real world, such as standards of measurement. They can be represented in the virtual or technological environments, such as technology standards of the W3C, IETF, and SAE. They can be de facto standards that are owned by one company but have evolved into standards over time by way of widespread adoption, such as Flash, EPS, and PDF. One thing is certain. The creation and adoption of standards help lead to technological advances. Agreement on standards and cooperation in their use helps companies, designers, programmers, and users to understand a common body of knowledge. Standards provide "playground principles" for getting people to work in a consistent manner. They also help to assure smaller companies a market for their products. Finally, instead of everyone investing in the conceptual research necessary to describe a proprietary technology, using an open source standard technology helps companies to advance beyond the development phase. What is SVG Scalable Vector Graphics (or SVG) is a standard developed by the W3C (World Wide Web Consortium) for two-dimensional vector graphics and graphical applications. SVG is defined as "a language for describing two-dimensional vector graphics and graphical applications in XML."[1] In non-technical terms, SVG is the vector graphics standard for the Web. Unlike other de facto proprietary vector graphics standards (Flash/SWF owned by Macromedia or DXF/DWG owned by Autodesk), SVG is open source. Right click an SVG image and you can view the source, which is written in XML, another W3C standard. (Please note that currently, depending on which browser you use, you may need to install a plug-in viewer to do this. The most popular SVG viewer is available, free, from Adobe at http://www.adobe.com/svg/viewer/install/.) There are many aspects to SVG files. SVG images can be static or animated, they can be displayed on PDAs, cell phones, as well as on Web sites. Why use the standard called "SVG" Most people, when asked, "What is SVG" say "it is a competitor to Flash." Although this COULD be true in many situations, this is similar to saying that "the raster formats of EPS and TIFF are competitors". Simply stated, both Flash and SVG should be used when they are the most advantageous solution. Designers need BOTH. Flash files work better in some cases, and SVG works better in others. Hence, it is important to thoroughly understand the many traits of SVG. Language compatibility SVG is written in XML. This fact alone is at the very core of why we use standards. Standards allow for information (data) to be shared. If SVG was not written in XML, it might be used just for producing "pretty" pictures, "flashy" animations. But because SVG is XML, it has all the benefits of working with other XML-compatible languages (MathML, ChemML, SOAP, SMIL). It also allows additional code or mark-up (ECMAScript/JavaScript, CSS) to be easily inserted, and provides fluency in handling and transforming data by using other languages to create SVG (Perl, Java). One obvious strength of SVG can be seen when creating data-driven graphics, used to connect front-end graphics to back-end business processes and data, such as e-commerce systems and corporate databases. (See Adobe's example of a ticket sales system at http://www.adobe.com/svg/overview/datadriven.html.) Data in the form of XML is linked, threaded, and formatted in an SVG display along with a full color vector image. Graphics compatibility SVG is a 2d vector non-proprietary format that other software can import, open or export, save to. When companies/developers agree on a standard, they can save money by adopting it rather than investing in their own designs. For example, if railroads were not based on a standard size, rail cars would have to be designed to ride on various sized rails. By using a non-proprietary standard, no one company (or vendor) makes all the profit. As the standard is owned by no one, there is no vendor lock-in. For further information, see http://steltenpower.com/OS4entrepreneurs.pdf. [2] Cross-platform compatibility A standard image format is one that is cross-platform compatible and supported by the majority of graphics applications. Cross-platform capability is important because if someone tries to use a native file format (like Photoshop's .PDS) and send it from a Mac to a PC, the file may not open correctly. Operating systems all handle graphic files somewhat differently, but SVG makes them platform transparent. As SVG continues to evolve and expand, more and more software will adopt SVG. Already well established vector illustration software (Adobe Illustrator, Microsoft Visio, and Maya) can save or export to SVG. And newer, software aimed at certain niches have adopted the SVG standard as well, including Inkscape (an open source 2d vector illustration software) and Mobile Designer (a robust commercial application that exports to animated SVG files for display on the Web as well as cell phones). Collaboration between programmers and designers Cross-platform compatibility also allows for collaboration between programmers and designers in the creation of SVG files. SVG files can be created by both software and by hand coding. Generally it takes both ways to deliver a powerful output. Designers will use design and illustration software that either saves or exports to SVG. Programmers will take these template designs ("skins", if you will) and either thread them with static XML data files or establish real-time links with databases. For example, a designer who uses a Mac can create an illustration in Adobe Illustrator, then save it to SVG. The programmer, who uses a PC, can open the file and add to it (by hand-coding), providing database linking, ECMAScript, SMIL animation, etc. For examples, see http://www.adobe.com/svg/demos. Note how Adobe markets SVG to both designers and programmers.[3] Additional advantages of SVG The above topics describe what SVG is and why it is an excellent standard to adopt in many situations. There are other reasons for using SVG beyond the fact that it is an open source standard. Clock-based animation If you have ever authored a SWF file using Macromedia Flash, you have seen an excellent example of frame-based animation, which shows new items in each frame. (SWF is the form that Flash files are saved in when you publish them to the Web.) SVG, on the other hand, uses clock-based animation, not frame-based. It relies on the computer's clock to determine the changing animation in the file. These different types of animation should be considered when determining the content of the design. Imagine, for a moment, that you are a famous director and are creating a motion picture. For one scene, you choose to have the camera pan across a skyline of New York City. As the camera pans, each frame shows new items (different buildings, trees, cars, etc.). This is an example of when to use Flash and frame-based animation. Each frame is used to show new objects. For the next scene, you choose to have the camera remain in one spot, while a car chase ensues on one street. The start of the scene has the car very far off in the distance, then, as the scene progresses, the car gets bigger; the car scales up within the environment. This is an example of when to use SVG and clock-based animation. However, SVG can mimic the new-objects-in-a-scene that is customary with frame-based animation. It does so by having all objects present in the file, with the visibility turned off or on at given times or actions (e.g. mouseclicks). With the general goal of creating small, efficiently sized files (especially for a cell phone display output where the rule-of-them is to limit a file to 30kb or less), use clock-based animation. SVG is best at animation that involves: Zooming in and out of a design. For example, zooming in on a mechanical assembly of a gearbox to see the details. The scaling of certain objects up or down. For example, the shape of the car in the car chase mentioned above. The manipulation of an object that always appears on screen. For example, to illustrate a running horse, a designer can simply move its legs and body to simulate galloping. Understanding when to create content that is best suited for SVG animation will lead to smaller file sizes. Click here to view a sample SVG file. Interpreted on the client side. What does this mean? Think of the client as the user of the computer (you, me, Uncle Bob). Anything that gets interpreted (by the browser, viewer, operating system, etc.) on this user's computer is being "interpreted on the client side." If a file is interpreted on the server side, when called upon by Uncle Bob's computer, it flies through cyberspace (the Internet connection) as a pre-compiled packet of data. Having a packet of data can include raster images that are stored as pixels, or Flash files that are pre-compiled. This can lead to larger file sizes. SVG, however, sits on the server as text (XML text to be specific). When called upon, it flies through cyberspace as text, and once on Uncle Bob's computer, will blossom into a graphic. Ultimately the goal of any standard is to have parties agree upon the format/design so that the technology associated with the standard can move past the "arguing" phase and technology can advance. SVG is a robust standard that can be seen in the displays of today. More importantly, it is a standard that will be seen in the displays of tomorrow. Support of global content Globalization of content is becoming an imperative with many organizations. This means that text and graphics must be localized to the language where the content is to be distributed. Graphics with callouts and text have always posed a problem when content is localized because multiple versions of the same graphic must be created to support the multiple languages. SVG supports text in layers. In other words, you can have a layer for French, German, Japanese or any designated language that is overlaid on the graphic as required. This results in huge savings in the localization of graphics. References [1] W3C SVG 1.1 Specification, http://www.w3.org/Graphics/SVG/ [2] Porter, Sara. "Open Source for Entrepreneurs," http://steltenpower.com/OS4entrepreneurs.pdf [3] SVG examples, http://www.adobe.com/svg/demos